<div class="relative bottom-10 z-40 max-xl:top-0" th:with="data=${@articleCountSortTag.listArticlesVoByType(1, 10, 'ARTICLE',
  'nice',
  'TOP', 'DESC')}">
  <div
    id="card-box"
    class="max-w-screen-xl overflow-hidden max-xl:pb-2 mt-3 cursor-pointer flex flex-nowrap mx-auto px-4"
  >
    <div class="shrink-0 h-40 group w-48 m-2 overflow-hidden rounded-lg" th:each="article,iterStat : ${data}" th:with="imgs=${@commonTag.split(article.articleImg==null?'':article.articleImg)},rando=${#numbers.formatDecimal(T(java.lang.Math).floor(T(java.lang.Math).random()*10),1,0)},iul=@{/static/nice/images/thumbs/}">
      <a th:href="${niceConfig['oly.web.domain']+'/article/'+article.articleId}">
      <img 
        class="h-40 w-48 transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 group-hover:scale-110 hover:bg-indigo-500 duration-300"
        src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg"
        th:alt="${article.articleTitle}"
        th:src="${(imgs==null)?iul+rando+'.jpg':imgs[0]}"
      />
      <div class="relative bottom-40 h-40 w-48  bg-slate-700/0 max-xl:bg-slate-700/60 transition-bg   group-hover:bg-slate-700/60 duration-1000">
        <p class=" px-1 pt-9 text-white" th:text="${article.articleTitle}">Flowbite app will help you improve yourself by analysing your everyday life.</p>
      </div> 
    </a>
    </div>
  </div>
</div>

<script>
  let cardBox = document.getElementById("card-box");
  if (cardBox!=null) {
    var firstDiv = cardBox.querySelectorAll("div")[0];
    let isDrageStart = false,
      isDragging = false,
      prevPageX,
      prevScrollLeft,
      positionDiff;
    const dragStart = (e) => {
      isDrageStart = true;
      prevPageX = e.pageX || e.touches[0].pageX;
      prevScrollLeft = cardBox!.scrollLeft;
    };
    const dragging = (e) => {
      if (!isDrageStart) return;
      e.preventDefault();
      isDragging = true;
      cardBox!.classList.add("dragging");
      positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
      cardBox!.scrollLeft = prevScrollLeft - positionDiff;
    };
    const dragStop = () => {
      isDrageStart = false;
      cardBox!.classList.remove("dragging");
      if (!isDragging) return;
      isDragging = false;
    };

    cardBox.addEventListener("mousemove", dragging); //当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。
    cardBox.addEventListener("touchmove", dragging); //当用户在屏幕上移动手指时会发生 touchmove 事件

    cardBox.addEventListener("mousedown", dragStart); //当鼠标指针移动到元素上方，并按下鼠标左键时，会发生 mousedown 事件
    cardBox.addEventListener("touchstart", dragStart); //当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发

    cardBox.addEventListener("mouseup", dragStop); //当鼠标指针移动到元素上方，并松开鼠标左键时，会发生 mouseup 事件
    cardBox.addEventListener("mouseleave", dragStop); //当鼠标指针离开被选元素时，会发生 mouseleave 事件
    cardBox.addEventListener("touchend", dragStop); //当手指从屏幕上离开的时候触发
  }
</script>
